<template>
    <div class="out_box">
        <headers />

        <div class="content_box">
            <div class="form_box">
                <v-form direction="horizontal">
                    <v-form-item class="border" label="订单金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text money" id="userName" name="userName">{{ '$ ' + dataForm.totalPrice }}</span>
                        <p class="tips" id="userName" name="userName">{{ '≈ ￥' + $convertRMB(dataForm.totalPrice) }}</p>
                    </v-form-item>
                    <v-form-item class="border" label="选择支付方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <v-radio class="mr_40" v-model="dataForm.payType" :label="1" disabled>余额支付</v-radio>
                        <v-radio v-model="dataForm.payType" :label="4">数字货币支付</v-radio>
                        <span class="ant-form-text tips_text small_font">(已支持24种主流数字货币)</span>
                        <div class="step_box mt_20" v-show="dataForm.payType === 4">
                            <h4 class="title mb_10">温馨提示</h4>
                            <p class="desc mb_10">您即将跳转到可信赖的第三方数字货币支付平台，请规范操作。平台执行的是实时汇率和实时币价策略，建议您在30分钟内完成交易支付。如遇网络阻塞或延时，请返回重新进入支付。</p>
                            <v-timeline>
                                <v-timeline-item>
                                    <span class="step" slot="dot">1</span>
                                    <div class="text">
                                        请在<span class="black">美金输入框</span>内输入您实际需要支付的美金数量或<span class="black">等待系统自动载入美金数值</span>，然后点击<span class="green">绿色按钮Continue/继续</span>继续；本次实际支付金额为：<span class="black">126.61</span>美元；
                                    </div>
                                    <div class="content mt_20">
                                        <p>Enter you order total</p>
                                        <p>
                                            <input style="display: none;" type="text">
                                            <input class="input" placeholder="" v-model="dataForm.name" autocomplete="off" />USD
                                            <img class="img" src="@assets/imgs/payment/continue.jpg" />
                                        </p>
                                    </div>
                                </v-timeline-item>
                                <v-timeline-item>
                                    <span class="step" slot="dot">2</span>
                                    <div class="text">
                                        请您选择即将使用的数字货币种类，并点击<span class="green">绿色按钮Payment completed/完成交易</span>,继续下一步；
                                    </div>
                                    <div class="content mt_20">
                                        <img src="@assets/imgs/payment/complete.jpg" style="width: 80px;" />
                                    </div>
                                </v-timeline-item>
                                <v-timeline-item>
                                    <span class="step" slot="dot">3</span>
                                    <div class="text">
                                        将付款地址复制到钱包或使用钱包扫描二维码完成支付，<span class="black">请您自行计算手续费，不要少付也不要多付</span>，平台以实际到账金额为准。付款成功后请点击已完成，区块打包确认需要时间请耐心等候，若未付款请点击稍后付款。
                                    </div>
                                </v-timeline-item>
                            </v-timeline>
                        </div>
                    </v-form-item>
                    <v-form-item class="border" label="选择币种" :label-col="labelCol" :wrapper-col="wrapperCol" v-show="dataForm.payType === 1">
                        <div class="type_box">
                            <span class="box select"><img class="img" src="@assets/imgs/main/currency_10.png" /></span>
                            <span class="box"><img class="img" src="@assets/imgs/main/currency_1_1.png" /></span>
                            <span class="box"><img class="img" src="@assets/imgs/main/currency_9.png" /></span>
                            <span class="box"><img class="img" src="@assets/imgs/main/currency_2.png" /></span>
                            <span class="box"><img class="img" src="@assets/imgs/main/currency_6.png" /></span>
                            <span class="box"><img class="img" src="@assets/imgs/main/currency_7.png" /></span>
                            <span class="box"><img class="img" src="@assets/imgs/main/currency_11.png" /></span>
                        </div>
                        <div class="desc_box">
                            <div class="list">
                                <p class="title">矿池费率(0.00%)</p>
                                <p class="bold">0.000000 USDT</p>
                                <p class="bold text">$ 12842.85</p>
                                <p class="tips" id="userName" name="userName">≈ ￥89900.00</p>
                            </div>
                            <div class="list">
                                <p class="title">合计金额</p>
                                <p class="bold">0.000000 USDT</p>
                                <p class="bold text">$ 12842.85</p>
                                <p class="tips" id="userName" name="userName">≈ ￥89900.00</p>
                            </div>
                            <div class="list">
                                <p class="title">可用余额 <span class="tag">充值</span> </p>
                                <p class="bold">0.000000 USDT</p>
                                <p class="bold text">$ 12842.85</p>
                                <p class="tips" id="userName" name="userName">≈ ￥89900.00</p>
                            </div>
                        </div>
                        <div class="tips_box mt_30">
                            <div class="increase_box">
                                <img class="icon" src="@assets/imgs/main/currency_10.png" />
                                <div class="increase bold">
                                    <!-- <p class="up">
                                        $<span class="number">
                                            1.0100
                                            <i class="iconfont">&#xe610;</i>
                                        </span>
                                    </p> -->
                                    <p class="down">
                                        $<span class="number">
                                            1.0100
                                            <i class="iconfont">&#xe610;</i>
                                        </span>
                                    </p>
                                </div>
                            </div>
                            <div class="text_box">
                                <i class="iconfont">&#xe7ac;</i>
                                <span class="text">由于数字资产价格浮动较大，请您在确认订单后尽快支付。
                                    订单支付数量 ≈ 订单金额 / 下单时该数字货币的价格。
                                    合计支付数量 ≈ 订单支付数量 + 矿池费率。
                                </span>
                            </div>
                        </div>
                    </v-form-item>
                    <v-form-item class="border bold" label="合计支付金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <p class="ant-form-text money" id="userName" name="userName">{{ '$ ' + dataForm.totalPrice }}</p>
                        <p class="tips" id="userName" name="userName">{{ '≈ ￥' + $convertRMB(dataForm.totalPrice) }}</p>
                    </v-form-item>
                    <v-form-item class="bold" label="输入交易密码" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <v-input class="password" placeholder="" v-model="dataForm.password" type="password" autocomplete="new-password"></v-input>
                        <span class="ant-form-text forgot ml_20" @click="jumpForgot()">忘记交易密码？</span>
                    </v-form-item>
                </v-form>
                <div class="save_box">
                    <v-button class="btn btn1" type="primary" size="large" @click="pushData()">立即支付</v-button>
                    <v-button class="btn btn2" size="large" @click="$router.back(-1)">我再想想</v-button>
                </div>
            </div>
            <div class="coin_payment none">
            <form id="coin_payment" action="https://www.coinpayments.net/index.php" method="post">
                <input type="hidden" name="cmd" value="_pay_simple">
                <input type="hidden" name="reset" value="1">
                <input type="hidden" name="merchant" value="711d0eb67ba70bc9453048906c27b944">
                <input type="hidden" name="item_name" value="笑脸矿业云算力套餐">
                <input type="hidden" name="item_desc" value="GRINOK- 笑脸 矿业">
                <input type="hidden" name="currency" value="USD">
                <input type="hidden" name="amountf" value="00.00">
                <input type="hidden" name="want_shipping" value="0">
                <input type="hidden" name="invoice" value="">
                <input type="hidden" name="success_url" value="http://www.grinok.com/#/hash_rate">
                <input type="hidden" name="cancel_url" value="http://www.grinok.com/#/hash_rate">
                <input type="hidden" name="ipn_url" value="http://www.grinok.com/apis/convertAudit-grinok/convertaudit/automaticSystemAudit">
                <input type="image" src="https://www.coinpayments.net/images/pub/buynow-small-black2.png" alt="现在就购买CoinPayments.net">
            </form>
        </div>
        </div>

        <footers></footers>
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';
    import { submitOrder } from '@doapis/orders/orders.js';

    export default {
        name: "Purchase",
        components: {
            Headers,
            Footers
        },
        data: function() {
            return {
                dataForm: {
                    payType: 4,
                    password: '',
                    name: ''
                },
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
                currencyOptions: {
                    options: [
                        {
                            value: '1',
                            label: 'bitcoin'
                        }
                    ],
                    value: 1
                }
            }
        },
        methods: {
            pushData: function() {
                const that = this;
                let dataForm = that.dataForm;
                if (!$.testPassword(dataForm.password)) {
                    that.$notification.error({
                        message: '操作错误！！',
                        description: '请填写6-16位，由数字和字母组成的密码！！',
                    });
                } else {
                    const userDATA = $.cookie('userDATA') || {};
                    submitOrder({
                        data: {
                            orderId: dataForm.orderId,
                            paytype: dataForm.payType,
                            payMoney: dataForm.totalPrice,
                            memberid: userDATA.memberid,
                            paymentPassword: dataForm.password,
                            item_number: 'powerOrder'
                        },
                        alertError: true
                    }).then(function(res) {
                        if (res.success) {
                            $.showLoad('body');
                            let payment_form = $('#coin_payment');
                            payment_form.find('[name="amountf"]').val(dataForm.totalPrice);
                            payment_form.find('[name="invoice"]').val(res.data.orderId);
                            payment_form.submit();
                            // that.$router.push({ path: '/hash_rate/payment', query: {
                            //     src: res.data.remark2
                            // }});
                        }
                    });
                }
            },
            // 忘记密码
            jumpForgot: function() {
                this.$router.push({ path: '/login_register/forgot', query: { type: 2 }});
            },
            $convertRMB: $.$convertRMB,
        },
        mounted: function() {
            const query = this.$route.query;
            this.$set(this.dataForm, 'totalPrice', query.totalPrice);
            this.dataForm.orderId = query.orderId;
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: white;
    }
    .content_box{
        .content_spacing;
        /deep/ label{
            font-size: 14px;
            color: #999;
            vertical-align: text-bottom;
        }
        /deep/ .ant-form-item{
            padding: 30px 0;
            margin-bottom: 0;
            font-size: 13px;
            color: #333;
            &.border{
                border-bottom: 1px solid #efeff4;
            }
            &.bold label{
                color: #333;
            }
            .tips{
                font-size: 10px;
                line-height: 14px;
                color: #999;
            }
            .money{
                font-size: 22px;
                font-weight: 700;
                letter-spacing: -1px;
            }
            .tips_text{
                font-size: 10px;
                line-height: 14px;
                color: #FF3C00;
                vertical-align: super;
            }
        }
        /deep/ .ant-form-item-label{
            width: 22%;
            padding-left: 50px;
            text-align: left;
        }
        .type_box{
            .flex_row_wrap;
            .box{
                padding: 15px;
                margin: 0 16px 16px 0;
                border-radius: 8px;
                box-sizing: border-box;
                background-color: #F5F5F5;
                border: 2px solid white;
                transition: border 0.4s;
                cursor: pointer;
                &.select{
                    border-color: @theme_color;
                }
                .img{
                    width: 40px;
                }
            }
        }
        .step_box{
            padding: 20px;
            border-radius: 8px;
            color: #999;
            background-color: #F5F5F5;
            .step{
                width: 20px;
                height: 20px;
                display: inline-block;
                line-height: 20px;
                text-align: center;
                border-radius: 50%;
                color: white;
                background-color: @theme_color;
            }
            .title{
                font-size: 16px;
                color: #333;
            }
            .desc{
                font-size: 10px;
                line-height: 22px;
                color: #FF3C00;
            }
            .text{
                margin-left: 10px;
                line-height: 22px;
            }
            .black{
                font-weight: 700;
                color: black;
            }
            .green{
                font-weight: 700;
                color: #29CC00;
            }
            .content{
                margin-left: 100px;
                color: black;
                .input{
                    width: 100px;
                    height: 16px;
                }
                .img{
                    width: auto;
                    height: 20px;
                    display: inline;
                    margin-left: 40px;
                }
            }
        }
        .desc_box{
            .list{
                display: inline-block;
                margin-right: 18%;
                &:last-child{
                    margin-right: 0;
                }
                .title{
                    color: #999;
                    .tag{
                        margin-left: 10px;
                        padding: 2px 8px;
                        font-size: 10px;
                        line-height: 14px;
                        color: white;
                        border-radius: 34px;
                        background-color: #29cc00;
                        cursor: pointer;
                    }
                }
                .text{
                    line-height: 28px;
                }
            }
        }
        .tips_box{
            .flex_row_wrap;
            padding: 16px 5%;
            border-radius: 8px;
            background-color: #F5F5F5;
            .increase_box{
                width: 40%;
                .flex_row_wrap;
                align-content: center;
                .icon{
                    width: 34px;
                    height: 34px;
                    margin-right: 20px;
                }
                .increase{
                    display: inline-block;
                    font-size: 13px;
                    .number{
                        font-size: 22px;
                        .iconfont{
                            display: inline-block;
                            font-size: 20px;
                        }
                    }
                    .up{
                        .number{
                            color: #008344;
                        }
                    }
                    .down{
                        .number{
                            color: #D40D0D;
                            .iconfont{
                                transform: rotateX(-180deg);
                            }
                        }
                    }
                }
            }
            .text_box{
                flex: 4;
                padding-left: 4%;
                line-height: 20px;
                color: #999;
                border-left: 1px solid #DDD;
                .iconfont, .text{
                    display: table-cell;
                    vertical-align: top;
                }
                .iconfont{
                    padding: 0 10px;
                }
            }
        }
        .password{
            width: 180px;
        }
        .forgot{
            font-size: 10px;
            color: @theme_color;
            vertical-align: middle;
            cursor: pointer;
        }
        .save_box{
            margin: 20px 0 40px 22%;
            padding-left: 50px;
            .btn{
                height: 36px;
                text-align: center;
                border-radius: 34px;
                box-sizing: border-box;
            }
            .btn1{
                width: 180px;
                .orange_linear_ellipsis_btn;
            }
            .btn2{
                width: 130px;
                margin-left: 40px;
                .gray_ellipsis_btn;
            }
        }
    }
</style>
